/**
 * 专家建议管理页面
 * @author Zeon scplay@gmail.com
 * @date 2019/3/20
 * @copyright Created by Panxsoft.
 */
<style lang="less" rel="stylesheet/less" type="text/less">
.v-customer-custom-recommend-value-views {
  padding: 20px;
}
</style>
<template>
	<div class="v-customer-custom-recommend-value-views">
		<Tabs
			type="card"
			@on-click="changeTab">
			<TabPane
				:tag_name="tag_name"
				:label="$t('common.create')"
				:name="$t('common.create')"
			>
				<create
					ref="create"
					:products="products"
					:hm_positions="hm_positions"
					@store="store"/>
			</TabPane>

			<TabPane
				:tag_name="tag_name"
				:label="$t('common.check')"
				:name="$t('common.check')"

			>
				<!-- :loading="table_loading" -->
				<index
					:loading="table_loading"
					:hairs="data_list.data"
					:products="products"
					:index_data="index_data"
					@edit="edit"
					@delete="destroy"
				/>

				<br>

				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="data_list"
						:current="page_info.page"
						:page-size="page_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"/>
				</Row>

			</TabPane>
		</Tabs>


		<Modal
			v-model="show_modal"
			:title="$t('修改产品关联信息')"
			class-name="vertical-middle-modal"
			@on-cancel="hide_Modal">

			<!-- 编辑组件 -->
			<edit
				v-if="show_modal"
				ref="edit"
				:loading="button_loading"
				:edit_data="edit_data"
				:hm_positions="hm_positions"
				:products="products"
				@update="update"/>

			<div slot="footer"/>

		</Modal>

	</div>
</template>

<script>
import API_LIST from 'src/API_LIST';
import create from './create';
import edit from './edit';
import index from './index';
import qs from 'qs';

import { mapMutations, mapGetters } from 'vuex';
import { computedFormMaxHeight } from 'src/views/mixins/computedFormMaxHeight';

export default {
	name: 'CustomRecommendValue',
	components: {
		create,
		edit,
		index,
	},
	mixins: [computedFormMaxHeight],

	data() {
		return {
			tag_name: this.$t('expert_suggest.tab_wax'),

			table_loading: false, // 表格更新时的loading

			page_info: { // 分页信息
				page: 1,
					per_page: 20,
			},

			index_data_start: 0,//index_data数据slice截取头

			index_data_end: 20,//index——data数据slice截取尾

			data_list: 1,

			index_data: [],

			products: [],

			hm_positions: [],

			show_modal: false, // 弹框的控制

			button_loading: false, // 按钮的loading

			edit_data: [], // 传入编辑组件的数据
		};
	},

	computed: {
	},
	watch: {},

	// 获取数据

		    created() {
		this.fetchCreate();
	},


	methods: {
		...mapMutations('spinShow', ['showSpin', 'closeSpin']),

		// 切换 tab
		changeTab(tag) {
			this.tag_name = tag;
      	if (tag === '查看') {
				this.index();
			}
		},

		store(form_data) {
			// $http.post(API, form_data)
			if (!form_data.wax_skin.level_sort) {
					alert('请选择程度')
			}else if(form_data.products.length==0) {
					alert('请选择商品')
			}else{
			this.showSpin(this.$t('common.please_wait'));
			
			this.$http.post(API_LIST.CUST_RECOMMEND_PRODUCT_HM_STORE, form_data).then(({ data }) => {
				  if (Number(data.code) !== 0) throw new Error(data.error);
								this.$Message.success(this.$t('common.create_success'));

					this.$refs.create.handleReset('formValidate');
				
			})
			  .catch((err) => {
					this.$Message.error(err.message);
				})
				.then(this.closeSpin);

			}


		},


		// $http.get(API, qs(this.query_info + page_info))
		// this.$http.get(API_LIST.CUST_RECOMMEND_PRODUCT).then((res) => {
		// 	console.log('index_data', res);
		// });

		// 点击编辑按钮
		edit(form_data) {
			// $http.update(API, qs(this.query_info + page_info))

		


			this.edit_data = form_data;

			this.show_modal = true;
		},

		// 点击更新按钮
		update(id, form_data) {
			if (form_data.products.length==0) {
				alert('请选择商品')
			}else{
			this.showSpin();
			this.$http.post(
				`${API_LIST.CUST_RECOMMEND_PRODUCT_HM_UPDATE}/${id}`,
				{
					skin_type:'CustomerRelateWaxSkin',
					_method: 'PUT',
					product_ids: form_data.products,
				},
			).then(({data}) => {
									if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.update_success'));

					this.show_modal = false;

					this.index();
				
			
			}).catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);

			}


		},
		
		// 关闭弹窗
		hide_Modal() {
			this.edit_data=null
		},

		// 点击删除按钮
		destroy(id) {
			// $http.delete(API, qs(this.query_info + page_info))
			this.$Modal.confirm({

				title: this.$t('product.tip'), // '温馨提示',
				content: this.$t('product.is_delete'), // '删除之后将无法恢复，确定吗？',
				onOk: () => {


			this.table_loading = true;

			this.$http.post(`${API_LIST.CUST_RECOMMEND_PRODUCT_HM_DELETE}/${id}`, {
				skin_type:'CustomerRelateWaxSkin',
				_method: 'DELETE',
				skin_ids: [id],
			}).then(({ data }) => {
				console.log('delete', data);


				this.index();

				this.$Message.success(this.$t('common.delete_success'));
			})

				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})

				.then(() => { this.table_loading = false; });
		},
			})
		},

		/**
     * 页码改变
     * @param  {string} pageNumber {当前页码}
     * @return {undefined}
     */
		pageChange(pageNumber) {
			// slice截取头为页数乘以页面显示条数，若页面为0时，截取头为0
			if (pageNumber != 1) {
				this.index_data_start = (pageNumber - 1) * this.page_info.per_page;
			} else {
				this.index_data_start = 0;
			}

			// slice截取尾为页数乘以页面显示条数
			this.index_data_end = pageNumber * this.page_info.per_page;
			this.page_info.page = pageNumber;
			this.index();
		},

		/**
     * 每页显示数改变
     * @param  {string} per_page {当前每页显示数}
     * @return {undefined}
     */
		perPageChange(per_page) {
			this.page_info.per_page = per_page;
			this.pageChange(1); // 强制页面跳转到第一个页面
			this.index();
		},

		/**
     *
     */
		// 请求index数据
		index() {
			this.showSpin();
			this.$http.get(API_LIST.CUST_RECOMMEND_PRODUCT_WAX).then(({ data }) => {
				if (data.code !== 0) {
					throw new Error(data.error);
				} else {
					this.data_list = data.wax_skin_relate_recommend_products.length	
						this.index_data = data.wax_skin_relate_recommend_products.slice(this.index_data_start, this.index_data_end);				
					
				}
				this.closeSpin();
			})
				.catch((error) => {
					this.$Message.error(error.message);
				});
		},
		fetchCreate() {
			this.showSpin();
			// 请求create数据
			this.$http.get(API_LIST.CUST_RECOMMEND_PRODUCT_CREATE).then(({ data }) => {
				if (data.code !== 0) {
					throw new Error(data.error);
				} else {
					this.products = data.products;
					this.hm_positions = data.wax_skin_suggests;
					this.closeSpin();
				
				}
			})
				.catch((error) => {
					this.$Message.error(error.message);
				});
		},

	},
};
</script>
